<template>
  <a class="dz-tabbar-item" :class="{'is-active': isActive }" @click.prevent="changePage">
    <slot name="icon-normal"></slot>
    <slot name="icon-text"></slot>
  </a>
</template>

<script>
export default {
  props: {
    id: {
      type: String
    },
    isRouter: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isActive() {
      if (this.$parent.value === this.id) {
        return true;
      }
    }
  },
  methods: {
    changePage() {
      // this.$parent.$emit("input", this.id);
      // if (this.isRouter) {
      //   this.$router.push(this.id);
      // }
      this.$parent.$emit("input", this.id);
      if (this.isRouter) {
        this.$router.push(this.id);
      }
      // console.log(this.$parent)
    }
  }
};
</script>

<style lang="less" scoped>
.dz-tabbar-item {
  flex: 1;
  text-align: center;
  color: #949494;
  .dz-tabbar-item-icon {
    display: block;
    padding: 2px;
  }
  .dz-tabbar-item-text {
    display: block;
    font-size: 10px;
  }
  &.is-active {
    .dz-tabbar-item-icon,
    .dz-tabbar-item-text {
      // color: #42bd56;
      color: #1682fb;
    }
  }
}
</style>